<template>
	<view class="task-position-home-app" style="height: 100%;">
		<view class="user-app" style="height:100%;">
			<view class="search-part" style="display: flex;padding-bottom:20upx;">
				<view class="search-option" style="height:60upx;border-radius:10upx;flex:1">
					<image src="../../../static/search-icon.png" style="width:48upx;margin-left:20upx;" mode="aspectFit"/>
					<input @input="searchByName" class="keyword-input" v-model="searchOption.keyword" style="flex:1;" />
					<text style="margin-right:20upx;">搜索</text>
				</view>		
				<!--
				<image src="../../../static/add.png" @click="showAddDialog" style="width:48upx;height: 48upx;margin-right:20upx;margin-top:5upx;" mode="aspectFit"/>
				-->
			</view>
			
			
			<view class="list-items">
				<view class="empty" v-if="listData.items.length==0" style="text-align: center;margin:10upx;color:#333;padding:30upx;">暂无数据</view>
				<view class="list-item" v-if="item.show" v-for="(item,key) in listData.items" :key="key" @click="setTeaHouse(item)">
					<view class="info">
						<view class="title">{{item.name}}</view>
						<view class="remark" style="heigth:50upx;">地址：{{item.address}}</view>
						<view class="remark" style="heigth:50upx;margin-top:10upx;">备注：{{item.remark}}</view>
					</view>
				</view>
			</view>
			<!--
			<view class="search-part">
				<view class="search-option" style="height:60upx;border-radius:10upx;">
					<image src="../../../static/search-icon.png" style="width:48upx;" mode="aspectFit"/>
					<text>搜索</text>
				</view>
				<view class="tabs" style="display: flex;margin-top:20upx;">
					<view class="tab-item" :class="{selected:(tabItem.value==tabItemValue)}" v-for="(tabItem,tabItemKey) in tabItems" @click="tabClick(tabItem)"
					 :key="tabItemKey">{{tabItem.label}}</view>
				</view>
			</view>
			-->
		</view>

		<!--
		<view class="button">确认提交</view>
		-->
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
	import util from '@/libs/util.js'
	
	export default {
	    data() {
	        return {
				isLogin: false,
				tabItemValue: 0,
				searchOption: {
					keyword: ''
				},
				addDialog: {
					show: false
				},
				listData: {
					items: [
					]
				}
	        }
	    },
		onLoad(params) {
			//this.getDataList();
		},
		onShow() {
			/*
			if (global.isLogin()) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
			*/

			//global.loginByCode();
			//this.getHomeData()
			//this.getDataList();
		},
		components: {
			wPicker
		},
		computed: {
			/*
			dateRangeValue() {
				return [this.homeData.startDate, this.homeData.endDate]
			}
			*/
		},
	    methods: {
			...util,
			setTeaHouse(item) {
				this.$emit('setTeaHouse',item);
			},
			showAddDialog() {
				this.goPage("/pages/task/home/positionAdd");
			},
			searchByName(event) {
				let name = event.target.value;
				if (name && name.length > 0) {
					for(let i = 0; i < this.listData.items.length; i++) {
						let index = this.listData.items[i].name.indexOf(name);
						if (index!=-1) {
							this.listData.items[i].show = true;
						} else {
							this.listData.items[i].show = false;
						}
					}
				} else {
					this.setField(this.listData.items, 'show', true);
				}
			},
			setItems(items) {
				this.listData.items = items
				this.setField(this.listData.items, 'show', true);
			},
			goPage(url) {
				uni.navigateTo({url: url})
			},
			
	    }
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.task-position-home-app{
		background-color: #F5F4F8;
		height: 100%;
		.login-button{
			background-color:#108EE9;
			margin-bottom: 20upx;
			width:90%;
			padding:20upx;
			text-align: center;
			margin:0 auto;
			color:white;
			margin-top:40upx;
			margin-bottom:20upx;
			border-radius: 10upx;
		}

		.search-part{
			position: fixed;
			/*top:0;*/
			width:100%;
			background-color: #F5F4F8;
			.search-option-input{
				.keyword-input{
					
				}
			}
			
			.search-option{
				background-color: white;
				margin:0 20upx;
				color:#BBBBBB;
				display: flex;
				/*justify-content: center;*/
				align-items: center;
			}
			.tabs{
				border:1px solid #108EE9;
				border-right:none;
				margin:0 20upx;
				border-radius: 5upx;
				width:calc(100% - 40upx);
				background-color: white;
				.tab-item{
					text-align: center;
					width:33%;
					padding: 8upx;
					color:#108EE9;
					border-right:1upx solid #108EE9;
				}
				.selected{
					background-color: #108EE9;
					color:white;
				
				}
			}
		}
		
		.list-items{
			padding-top:50upx;
			background-color: #F5F4F8;
			.list-item{
				background-color: white;
				margin:30upx 0;
				display: flex;
				flex-direction: row;
				padding:20upx;
		
				.icon{
					margin:10upx;
				}
				.info{
					margin-top:10upx;
					.title{
						margin-bottom:30upx;
					}
					.remark{
						font-size: 28upx;
						margin-top:-10upx;
						color:#ccc;
					}
					.detail{
						font-size:28upx;
					}
				}
			}
		}
	}
	
</style>
